<template>
	<view>
		<view class="box" v-for="(item, index) in housList" :key="index" @click="payItem(item.id)">
			<view class="shuangb"><text>房屋: {{item.name}}</text><text>面积: {{item.area}}</text></view>
			<view class="name shuangb"><text>姓名: {{item.owner_name}}</text><text class="name">价格: {{item.price}} 元</text></view>
			<view class="shuangb"><text>小区名称: {{item.xqname}}</text><text>楼栋名称: {{item.ldname}}</text></view>
			<view>单元名称: {{item.dyname}}</view>
			<view class="cent"><text class="bdfw">缴费</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				housList: [],
			}
		},
		mounted() {
			this.getHouse();
		},
		methods: {
			getHouse() {
				let params = {
					customerId: uni.getStorageSync('user').roleId
				}
				this.$api.getHouseContact(params).then((res) => {
					if (res.success) {
						if (res.rows.length == 0) {
							uni.showToast({
								icon: 'none',
								title: "请先绑定房屋",
								duration: 1000
							});
							setTimeout(() => {
								uni.redirectTo({
								    url: '../bindHouse/bindHouse'
								});
							},1000)
						} else {
						this.housList = res.rows
						}
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			payItem(id) {
				uni.setStorageSync('payhouseId', id);
				uni.navigateTo({
				    url: '../payItem/payItem'
				});
			},
		}
	}
</script>

<style scoped>
	.box {
		background: #F8F8FF;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		line-height: 24px;
	}
	.name {
		font-weight: bold;
		font-size: 16px;
	}
	.shuangb {
		display: flex;
		justify-content: space-between;
	}
	.cent {
		display: flex;
		justify-content: center;
	}
	.bdfw {
		background: #007AFF;
		display: block;
		width: 100px;
		text-align: center;
		border-radius: 10px;
		color: #fff;
	}
</style>
